<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>
            返回
        </Button>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="100">
            <h3>隔离人员信息</h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="姓名" prop="name">
                                    <i-input type="text" v-model="formCustom.name" placeholder="请输入姓名"></i-input>
                                </Form-item>
                            </Col>

                            <Col span="7">
                                <Form-item label="来源国家" prop="from_country">
                                    <i-input type="text" v-model="formCustom.from_country" placeholder="请输入来源国家"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件类型" prop="id_type">
                                    <Select style="width:100%" placeholder="请选择证件类型" v-model="formCustom.id_type">
                                        <Option :value="item.value" v-for='item in cardTypeList' :key="item.value">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件号码" prop="id_num">
                                    <i-input type="text" v-model="formCustom.id_num" placeholder="请输入证件号码"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="联系电话" prop="contact">
                                    <i-input type="text" v-model="formCustom.contact" placeholder="请输入联系电话"></i-input>
                                </Form-item>
                            </Col>

                        </Row>
                    </div>
                </div>
            </Card>

            <h3>隔离信息</h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="隔离时间" prop="start_time">
                                    <DatePicker :value="formCustom.start_time" @on-change="startChange"
                                                format="yyyy-MM-dd"
                                                type="date" placeholder="选择隔离时间"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="隔离方式" prop="isolate_type">
                                    <Select style="width:100%"
                                            placeholder="请选择隔离方式" v-model="formCustom.isolate_type">
                                        <Option :value="item.value" v-for="item in quarantineTypeList" :key="item.value">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="隔离地点" prop="isolate_addr">
                                    <i-input type="text" v-model="formCustom.isolate_addr" placeholder="请输入隔离地点"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="隔离状态" prop="isolate_status">
                                    <Select style="width:100%" v-model="formCustom.isolate_status"
                                            placeholder="请选择隔离状态">
                                        <Option :value="item.value" v-for="item in isolationStateType" :key="item.value">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7" >
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :options="options1"   :value="formCustom.imp_date" format="yyyy-MM-dd"
                                                type="date" placeholder="选择上报日期"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="14">
                                <Form-item label="隔离管理" prop="remarks">
                                    <i-input type="textarea" v-model="formCustom.remarks" placeholder="请输入隔离管理"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Form>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showDetail">
            <Col>
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </Col>
        </Row>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit"
        >
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>

    </div>
</template>

<script>
import { update, insert, getById } from '@/api/outbreak-management/overseas-to-shen/isolate-personnel-information'
import { getCardType, getQuarantineType, getIsolationStateType } from '@/api/outbreak-management/public'

/*
  隔离人员管理
   */
export default {
  data () {
    return {
      cardTypeList: [],
      quarantineTypeList: [],
      isolationStateType: [],
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      formCustom: {
        name: '',
        from_country: '',
        id_type: '',
        id_num: '',
        contact: '',
        start_time: '',
        isolate_type: '',
        isolate_addr: '',
        isolate_status: '',
        remarks: '',
        imp_date: '',
        type: 'GL'
      },
      ruleCustom: {
        name: { required: true, message: '姓名必填', trigger: 'blur' },
        from_country: { required: true, message: '来源国家必填', trigger: 'blur' },
        id_type: { required: true, message: '证件类型必选', trigger: 'change' },
        id_num: { required: true, message: '证件号码必填', trigger: 'blur' },
        contact: { required: true, message: '联系电话必填', trigger: 'blur' },
        start_time: { required: true, message: '隔离时间必选', trigger: 'blur' },
        isolate_type: { required: true, message: '隔离方式必选', trigger: 'change' },
        isolate_addr: { required: true, message: '隔离地址必填', trigger: 'blur' },
        isolate_status: { required: true, message: '隔离状态必选', trigger: 'change' },
        remarks: { required: true, message: '隔离管理必填', trigger: 'blur' },
        imp_date: { required: true, message: '上报日期必选', trigger: 'blur' }
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },

    /**
       * 日期格式化
       */
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    /**
       * 日期格式化
       */
    startChange (date) {
      this.formCustom.start_time = date
    },
    handleSubmit () {
      let requestData = this.formCustom
      requestData.type = 'GL'
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    getEditData (id) {
      getById({ id, type: 'GL' }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.formCustom = res
          this.formCustom.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
          this.formCustom.start_time = this.$common.moment(res.start_time).format('YYYY-MM-DD')
        }
        console.log(data)
      })
    },
    initData () {
      Promise.all([getCardType(), getQuarantineType(), getIsolationStateType()]).then(res => {
        this.cardTypeList = res[0].data.data
        this.quarantineTypeList = res[1].data.data
        this.isolationStateType = res[2].data.data
        console.log(res)
      })
    }
  },
  created () {
    this.initData()
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>

<style scoped>
    h3 {
        margin: 10px auto;
    }
</style>
